<!DOCTYPE html>
<html lang="en">
<head>
<title>How do I change the background color of a block?</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="" name="description">
<link href="../css/help.css" media="all" rel="stylesheet" type="text/css" charset="utf-8">
<link href="/library/webjars/fontawesome/4.7.0/css/font-awesome.min.css" media="screen" rel="stylesheet">
<link href="/library/skin/morpheus-default/tool.css" media="screen" rel="stylesheet" type="text/css" charset="utf-8">
<script src="/library/webjars/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/library/js/headscripts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    includeWebjarLibrary('featherlight');
    $(document).ready(function(){
      $("a.screensteps-image-zoom").featherlight({
        type: { image:true },
        closeOnClick: 'anywhere'
      }); 
    });   
</script>
</head>
<body>
  <div><div>
<div><h1 class="article-title">How do I change the background color of a block?</h1></div>
<div>



      <div class="step screensteps-section screensteps-depth-1">
    <h2 class="step-title screensteps-heading">Go to Lessons.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/007/053/988/original/f993bd9a-5cf2-42e2-ae24-b675d0262c84.png" alt="" height="110" width="202">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_06536787-C152-44CF-BA7F-CABF3C832D5F" class="text-block-content">
    <p>If you titled your page something other than <em>Lessons</em>, select the title of the page as it appears in your Tool Menu.</p>
  </div>
</div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_1133728C-1C86-4104-B8F8-BA60A5B8D755" class="text-block-content">
    <p>Click on the Lessons tool in the Tool Menu to display the page.</p>
<p><em>Note: The Lesson page must already contain content before you can change the color of the block. </em></p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="select-the-column-properties-icon-in-the-top-left-of-the-block">
    <h2 class="step-title screensteps-heading">Select the column properties icon in the top left of the block.</h2>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/004/192/126/original/003a77bb-dc06-4b5e-a05f-9a88768eab52.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/004/192/126/medium/003a77bb-dc06-4b5e-a05f-9a88768eab52.png" alt="" height="366" width="855">
      </a>
  </div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="choose-the-desired-color-from-the-drop-down-menu">
    <h2 class="step-title screensteps-heading">Choose the desired color from the drop-down menu.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/004/196/202/original/77d7fe65-f2f9-498d-8be3-4e13e04721d3.png" alt="" height="581" width="673">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_865081A8-7A6C-436C-AD1B-768A541A929C" class="text-block-content">
    <p>Note: To change the color of the block to be all one color, you will need to use the <strong>Legacy Colors</strong>. The other colors will change the color of the borders. </p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1">
    <h2 class="step-title screensteps-heading">Click Save.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/004/196/200/original/be96c742-15e9-4a15-9d26-d31880407926.png" alt="" height="336" width="651">
  </div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="the-selected-color-will-display">
    <h2 class="step-title screensteps-heading">The selected color will display.</h2>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/004/196/204/original/64f9e983-0726-4b1d-9bab-a676b1a6a72d.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/004/196/204/medium/64f9e983-0726-4b1d-9bab-a676b1a6a72d.png" alt="" height="745" width="855">
      </a>
  </div>
 
  </div>


</div>
</div></div>
</body>
</html>
